<template>
  <div class="test-result" v-loading="loading">
    <transition name="router-slid">
      <div v-if="!loading" class="result-info">
        <el-row class="api_info">
          <el-col :span="4">
            <span class="meg_title">请求状态 :</span>
            <span class="valuetest" :class='result.status == "0" ? "errorCol":"seccessCol"'>{{result.status == "0" ? "失败":"成功"}}</span>
          </el-col>
          <el-col :span="4">
            <span class="meg_title">执行时间 :</span>
            <span class="valuetest">{{result.startTime ? $millisecond(result.endTime - result.startTime) : "--"}}</span>
          </el-col>
          <el-col :span="4">
            <span class="meg_title">开始时间 :</span>
            <span class="valuetest">{{result.startTime ? $time(result.startTime) : ''}}</span>
          </el-col>
          <el-col :span="6">
            <span class="meg_title">结束时间 :</span>
            <span class="valuetest">{{result.endTime ? $time(result.endTime) : ''}}</span>
          </el-col>
          <el-col :span="6" v-if="result.assertValue">
            <span class="meg_title">断言判断 :</span>
            <span class="valuetest" :class='result.assertValue.success ? "seccessCol":"errorCol"'>{{result.assertValue.success ? '成功' : '失败'}}</span>
          </el-col>
        </el-row>
        <el-row class="api_info">
          <el-col :span="24">
            <div class="preMsg">
              <span class="meg_title">Response Body：</span>
              <pre class="resMessage" v-if="typeof(result.outValue) !== 'string'">{{result.outValue}}</pre>
              <div class="resMessage" v-else>{{result.outValue}}</div>
            </div>
            <div class="preMsg">
              <span class="meg_title">Curl：</span>
              <div class="resMessage">{{result.curl || "--"}}</div>
            </div>
            <div class="preMsg">
              <span class="meg_title">Request URL：</span>
              <div class="resMessage">{{result.url || "--"}}</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </transition>
  </div>
</template>

<script>
  export default {
    name: "TestResult",
    props: {
      params: {
        type: Object
      }
    },
    data() {
      return {
        loading: true,
        result: {},
      }
    },
    created() {
      this.test();
    },
    methods: {
      test() {
        this.axios.post("api/interface/test/call", this.params).then(res => {
          if (res.data.status === 0) {
            if (typeof res.data.data.outValue === "string" && res.data.data.outValue !== "") {
              try {
                res.data.data.outValue = JSON.parse(res.data.data.outValue);
              }catch (e) {}
            }
            if (typeof res.data.data.assertValue === "string" && res.data.data.assertValue !== "") {
              try {
                res.data.data.assertValue = JSON.parse(res.data.data.assertValue);
              }catch (e) {}
            }
            this.result = res.data.data;
            console.log("result: ", this.result);
          } else {
            this.$message.error(res.data.data.msg);
          }
          setTimeout(() => {
            this.loading = false;
            this.$nextTick(() => {
              let div = document.getElementById('interfaceRight');
              div.scrollTop = div.scrollHeight;
            });
          }, 1000);
        }).catch(err => {
          setTimeout(() => { this.loading = false; }, 1000);
        });
      },
    }
  }
</script>

<style scoped>
  .result-info{min-height: 200px}
  .api_info{margin:10px 0px; color: #999999;}
  .meg_title{color: #99a9bf;display: inline-block;}
  .api_info .valuetest{margin-left: 15px;color: #333}
  .seccessCol{color: #67C23A !important;}
  .errorCol{color: #F56C6C !important;}
  .resMessage{background-color: #f4f4f5;padding: 5px 10px; border-radius: 4px;min-height: 34px;}
  .preMsg{margin-bottom: 10px;}
</style>
